#pageMonitor{
    background: #f3f6fb;
    width: calc(~"100% - 200px");
    overflow: hidden;
    padding: 25px 40px;
    .monitor-content{
        width: 100%;
        position: relative;
        .monitor-content-box{
            background-color: #fff;
            border-radius: 6px;
            box-shadow: 0px 0px 5px #ddd;
            .el-tabs__header{
                margin: 0;
            }
            .el-tabs__active-bar{
                width: 160px!important;
                height: 4px;
                background-color: #1e5ee3;
            }
            .el-tabs__item{
                height: 60px;
                line-height: 60px;
                width: 160px;
                padding: 0px;
                font-size: 16px;
                text-align: center;
            }
            .el-tabs__nav-wrap::after{
                background-color:#eaf2ff;
            }
            .el-tabs__item.is-active,.el-tabs__item:hover{
                color: #1e5ee3;
            }
            
        }
        
    }
}

#infoList{
    padding-top: 20px;
    h3.infoList_title{
        font-size: 18px;
        color: #000;
        text-align: left;
        font-weight: normal;
        padding-left: 75px;
        margin-bottom: 30px;
        
    }
    ul.infoList_filter{
        padding-left: 80px;
        list-style: none;
        display: block;
        height: 280px;
        border-bottom: 1px solid #e5f3ff;
        li{
            margin-bottom: 15px;
            float: left;
            width: 34%;
            text-align: left;
            label.el-radio{
                margin-right: 0px;
                .el-radio__input{
                    display: none!important;
                }
                .el-radio__label{
                    height: 32px;
                    display: inline-block;
                    font-size: 14px;
                    line-height: 32px;
                    padding: 0 10px;
                }
                .el-radio__input.is-checked+.el-radio__label{
                    background: #44a6ff;
                }
            }
            label.defineTimeBtn{
                .el-radio__label{
                    background: #fff;
                    color: #44a6ff;
                    border-radius: 4px;
                    text-align: left;
                    i{
                        display: inline-block;
                        font-style: normal;
                        -moz-transform: rotate(90deg);
                        -webkit-transform: rotate(90deg);
                        -moz-transition: transform 0.8s; 
                        -webkit-transition: transform 0.8s; 
                    }
                } 
            }
            label.is-checked{
                .el-radio__label{
                    background: #44a6ff;
                    color: #fff;
                    border-radius: 4px;
                    i{
                        -moz-transform: rotate(0deg);
                        -webkit-transform: rotate(0deg);
                        -moz-transition: transform 0.8s; 
                        -webkit-transition: transform 0.8s; 
                    }
                }
            }
            .el-input__inner{
                height: 32px;
                line-height: 32px;
            }
            .el-input__suffix{
                .el-input__icon{
                    line-height: 32px;
                }
            }
            .el-date-editor{
                width: 210px;
                padding: 0px;
                position: relative;
                .el-range__icon{
                    position: absolute;
                    right: 0px;
                }
                .el-range-separator{
                    padding: 0px;
                }
                .el-range__close-icon{
                    position: absolute;
                    right: 16px;
                }
            }
        }
        li.singular{
            width: 65%;
        }
        li.infoList_filter_btn{
            width: 100%;
            margin: 20px 0;
            text-align: center;
            .el-button{
                width: 120px;
                height: 40px;
            }
            .el-button--success{
                background: #32d093;
                border: 1px solid #32d093;
            }
            .el-button--danger{
                background: #fe6767;
                border: 1px solid #fe6767;
            }
        }
    }
    .tableBox{
        width: 90%;
        padding-left: 5%;
        position: relative;
        .pageTotal{
            display: inline-block;
            position: absolute;
            top: -50px;
            left: 155px;
            font-size: 12px;
            color: #999;
        }
        .pageSize{
            position: absolute;
            top: -54px;
            font-size: 12px;
            left: 350px;
            .el-input__inner{
                width: 87px;
                height: 24px;
                font-size: 12px;
                border: 1px solid #d6e6f6;
            }
            .el-input__icon{
                line-height: 24px;
            }
        }
        .filterInput{
            position: absolute;
            top: -58px;
            right: 60px;
            width: 187px;
            height: 32px;
            .el-input__inner{
                height: 32px;
                line-height: 32px;
                padding-left: 10px;
                border: 1px solid #d9e5fb;
                font-size: 12px;
            }
            .el-input__prefix{
                right: 0;
                left: auto;
                i.el-input__icon{
                    line-height: 32px;
                }
            }
        }
        .filterBtn{
            height: 32px;
            width: 56px;
            top: -58px;
            right: 0px;
            position: absolute;
            span{
                position: absolute;
                top: 0;
                line-height: 32px;
                height: 32px;
                width: 56px;
                left: 0;
                text-align: center;
            }
        }
        .tableBtnGroup{
            display: inline-block;
            position: absolute;
            z-index: 999;
            left: 200px;
            top: 10px;
            .el-button--mini, .el-button--mini.is-round{
                padding: 7px 10px;
                height: 28px;
                line-height: 28px;
                // border: none;
                margin: 0px;
            }
            i{
                position: relative;
                width: 16px;
                height: 16px;
                display: inline-block;
                top: -4px;
                margin-right: 5px;
            }
            i.daochu{
                background: url('../../assets/images/daochu_hui16.png') no-repeat;
            }
            span{
                position: relative;
                top: -7px;
            }
        }
        .visibilyBtn{
            position: absolute;
            right: 0;
            width: 64px;
            top: 10px;
            height: 28px;
            z-index: 99;
            background: #32d093;
            color: #fff;
            border: 1px solid #32d093;
            span{
                position: absolute;
                width: 64px;
                height: 28px;
                line-height: 28px;
                left: 0;
                top: 0;
                display: inline-block;
                text-align: center;
            }
        }
        .el-table{
            width: 96%!important;
            margin-left: 2%;
            thead{
                color: #666;
                font-weight: normal;
            }
        }
        .el-table__body{
            width: 100%;
            tr.el-table__row{
                .el-table-column--selection{
                    position: relative;
                    .cell{
                        position: absolute;
                        top: 15px;
                        left: -3px;
                    }
                }
                .cell{
                    padding-right: 0px!important;
                }
                .newsBox{
                    float: left;
                    width: calc(~"100% - 220px");
                    h3.newsTitle{
                        margin: 5px 0 0 0;
                        text-align: left;
                        font-size: 16px;
                        width: 90%;
                        display: inline-block;
                    }
                    .isRead{
                        float: right;
                        display: inline-block;
                        width: 40px;
                        height: 24px;
                        border-radius: 4px;
                        color: #8b8b8b;
                        background: #e5e5e5;
                        text-align: center;
                        line-height: 24px;
                        margin-top: 5px;
                    }
                    .noRead{
                        background: #ffe1e1!important;
                        color: #fe6767!important;
                    }
                    div.newsContent{
                        padding-left: 5px;
                        margin: 10px 0px;
                        max-height: 60px;
                        overflow: hidden;
                        color: #384157;
                        line-height: 20px;
                        text-align: justify;
                        font-size: 14px;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                    }
                    span{
                        font-size: 12px;
                    }
                    .newsTime{
                        padding-left: 5px;
                        margin-right: 10%;
                    }
                    .newsTrigger{
                        float: right;
                    }
                }
                .newsRelevant{
                    float: right;
                    width: 190px;
                    
                    .rele{
                        margin: 5px 20px 0 0;
                        display: inline-block;
                        float: left;
                        // font-size: 12px;
                        color: #333;
                    }
                    a{
                        margin: 5px 0 0 0;
                        display: inline-block;
                        float: right;
                        // font-size: 12px;
                        text-decoration: none;
                        color: #4d79e4;
                    }
                    .newsBtn{
                        margin-top: 20px;
                        display: inline-block;
                        height: 45px;
                        line-height: 75px;
                        color: #9eadc5;
                        font-size: 12px;
                        min-width: 24px;
                        padding: 0 7px;
                        cursor: pointer;
                    }
                    .news_warn{
                        background: url("../../assets/images/yujing24.png") 5px 0px no-repeat;
                    }
                    .news_copy{
                        background: url("../../assets/images/copy_hui24.png") 15px 0px no-repeat;
                    }
                    .news_collect{
                        background: url("../../assets/images/shoucanghui24.png") 5px 0px no-repeat;
                    }
                    .news_read{
                        padding-right: 0px;
                        background: url("../../assets/images/yidu_hui24.png") 5px 0px no-repeat;
                    }
                    .el-select--small{
                        float: right;
                        margin-top: 10px;
                    }
                    .el-input__inner{
                        height: 24px;
                        line-height: 24px;
                        font-size: 12px;
                        width: 80px;
                        color: #b0b8cd;
                    }
                    .el-input__prefix, .el-input__suffix{
                        line-height: 24px;
                        .el-input__icon{
                            line-height: 24px;
                        }
                    }
                }
            }
           
        }
        td,tr.el-table__row{
            background:#fff!important;
        }
        .el-pagination{
            margin: 40px 0 60px 0;
            display: inline-block;
            .el-pagination__sizes{
                position: absolute;
                left: 50px;
            }
        }
    }
}

#dataAnalysis{
    .chart-boxs{
        border-bottom: 1px solid #e9f3ff;
        padding: 35px 75px 10px 75px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        padding-bottom: 30px;
        .chart-box-title{
            font-size: 18px;
            color: #000;
            width: 100%;
            height: 40px;
            text-align: left;
        }
        .showChartBtn{
            position: absolute;
            right: 75px;
            z-index: 999;
            height: 32px;
            border: none;
            color: #fe5e5e;
        }
        .lineOptionText{
            position: absolute;
            top: 72px;
            height: 32px;
            line-height: 32px;
            display: inline-block;
            font-size: 14px;
        }
        .mapLink{
            position: absolute;
            z-index: 99;
            font-size: 14px;
            top: 80px;
            i{
                display: inline-block;
                width: 8px;
                height: 8px;
                background: #44a6ff;
                border-radius: 8px;
                margin-right: 10px;
            }
        }
        .lineOption{
            position: absolute;
            height: 32px;
            width: 110px;
            top: 72px;
            left: 150px;
            z-index: 999;
            .el-input__inner{
                height: 32px;
                line-height: 32px;
                padding-left: 5px;
            }
            .el-input__icon{
                height: 32px;
                display: inline-block;
                line-height: 32px;
            }
        }
        .chart-box{
            width: 100%;
            height: 300px;    
        }
        .visualMap{
            position: absolute;
            z-index: 999;
            left: 50px;
            bottom: 30px;
            height: 100px;
            width: 24px;
            border-radius: 20px;
            background-image: linear-gradient(to bottom, #4b9efe , #4dc7fa, #36d8a9);
            span{
                color: #fff;
                font-size: 14px;
                position: absolute;
                left: 4px;
            }
            span.visualMap_top{
                top: 6px;
            }
            span.visualMap_bottom{
                bottom: 6px;
            }
        }
        #map-chart{
            width: 70%;
        }
        #area-chart{
            width: 29%;
            border: 1px solid #e9f3ff;
            overflow: auto;
            height: 270px;
            ul.area-ul{
                width: 100%;
                margin: 0px;
                padding: 0;
                list-style: none;
                padding: 10px 0px;
                li{
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    position: relative;
                    span.area-name{
                        font-size: 14px;
                        float: left;
                        padding-left: 20px;
                    }
                    span.area-data{
                        font-size: 14px;
                        float: right;
                        padding-right: 20px;
                    }
                    span.area-progress{
                        float: left;
                        display: inline-block;
                        height: 4px;
                        margin-left: 15px;
                        width: calc(~"100% - 140px");
                        background-color: #fff;
                        position: relative;
                        top: 15px;
                        .area-rate{
                            display: inline-block;
                            height: 4px;
                            border-radius: 4px;
                            background-color: #4fc7fc;
                            position: absolute;
                            top: 0;
                            left: 0;
                            z-index: 99;
                        }
                    }
                }
                li:hover{
                    cursor: pointer;
                    color: #00b1ff;
                }
            }

        }
        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
        ::-webkit-scrollbar  
        {  
            width: 6px;  
            // height: 110px;
            background-color: #fff;  
        }  
        /*定义滚动条轨道 内阴影+圆角*/  
        ::-webkit-scrollbar-track  
        { 
            border-radius: 10px;  
            background-color: #fff;  
        }    
        /*定义滑块 内阴影+圆角*/  
        ::-webkit-scrollbar-thumb  
        {  
            border-radius: 10px; 
            background-color: #d6e5fa;  
        }  
        /*滑块效果*/
        ::-webkit-scrollbar-thumb:hover
        {
        border-radius: 5px;
        background: rgba(0,0,0,0.4);
        }

    }
    .el-dialog{
        width: 30%;
    }
    .el-dialog__header{
        text-align: left;
        height: 45px;
        line-height: 45px;
        padding: 0 15px;
        border-bottom: 1px solid #eee;
        .el-dialog__headerbtn{
            top: 22px;
        }
    }
    .el-dialog__body{
        .el-form{
            .el-form-item{
                .el-form-item__content{
                    text-align: left;
                }
            }
        }
    }
}

.dn{
    display: none!important;
}

#directMonite{
    padding-top: 20px;
    h3.monitor_title{
        font-size: 18px;
        color: #000;
        text-align: left;
        font-weight: normal;
        padding-left: 75px;
        margin-bottom: 30px;
    }
    .monitorBox{
        display: flex;
        flex-direction: row;
        padding:0 80px;
        .el-input__inner{
            width: 150px;
            height: 32px;
            border: 1px solid #d7e5fa;
        }
        .el-input__suffix{
            .el-input__icon{
                line-height: 32px;
            }
        }
        .domainName{
            width: calc(~"100% - 290px");
            .el-input__inner{
                width: calc(~"100% - 20px");
                margin-left: 20px;
            }
        }
        .el-button{
            width: 56px;
            height: 32px;
            line-height: 32px;
            position: relative;
            margin-left: 14px;
            span{
                display: inline-block;
                top: 0;
                height: 32px;
                width: 56px;
                text-align: center;
                left: 0;
                position: absolute;
            }
        }
        .proviceBtn{
            width: 150px;
            text-align:center;
            span{
                width: 150px;
            }
        }
    }
    .tableContent{
        padding:0 80px;
        margin-top: 15px;
        display: flex;
        .radioGroup{
            display: inline-block;
            width: 150px;
            float: left;
            .el-radio{
                height: 40px;
                width: 150px;
                margin: 0;
                line-height: 40px;
                border-top-left-radius: 8px;
                border-bottom-left-radius: 8px;
                text-align: left;
            }
            .el-radio__input{
                opacity: 0;
                width: 0;
            }
            .is-checked{
                background: #32d093;
                .el-radio__label{
                    color: #fff;
                }
            }
        }
        .el-table{
            float: left;
            width: calc(~"100% - 150px");
            display: inline-block;
            thead{
                th{
                    background: #e9f2ff;
                    .cell{
                        color: #1e5ee3;
                        font-weight: normal;
                    }
                }
            }
            .el-table__row{
                td{
                    padding: 0;
                    .cell{
                        height: 40px;
                        line-height: 40px;
                        font-size: 14px;
                        color: #333;
                        position: relative;
                        .el-button{
                            top: 10px;
                            width: 64px;
                            height: 24px;
                            position: absolute;
                            background: #fe6767;
                            border: none;
                            span{
                                position: absolute;
                                top: 0;
                                left: 0;
                                height: 24px;
                                line-height: 24px;
                                text-align: center;
                                width: 64px;
                                color: #fff;
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
        .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
        border-color: #d7e5fa; 
        }
        .el-table--border::after, .el-table--group::after, .el-table::before{
        background-color: #d7e5fa;
        }
    }
    .siteChooseDialog{
        .el-dialog__header{
            display: none;
        }
        h2.title{
            color: #000;
            font-size: 18px;
            font-weight: normal;
        }
        .dialogTip{
            color: #333;
            font-size: 14px;
        }
        .transfer{
            position: relative;
            overflow: auto;
            .transfer-title{
                display: none;
            }
            .transfer-left{
                margin-top: 60px;
                height: calc(~"100% - 60px");
                position: relative;
                .filter-tree.el-input{
                    position: absolute;
                    top: -45px;
                    left: 0px;
                    width: 320px;
                }
            }
            .transfer-right{
                margin-top: 60px;
                height: calc(~"100% - 60px");
                .filter-tree.el-input{
                    display: none;
                }
            }
            .transfer-center{
                .transfer-center-item{
                    position: relative;
                    .el-button{
                        width: 56px;
                        height: 24px;
                        // background-color: #32d093;
                        line-height: 24px;
                        position: relative;
                        span{
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 56px;
                            display: inline-block;
                            text-align: center;
                        }
                        .el-icon-arrow-left{
                            display: none;
                        }
                    }
                }
                .transfer-center-item:first-child{
                    .el-button--primary{
                        background-color: rgba(50,208,147,1);
                        border-color: rgba(50,208,147,1);
                    }
                    .el-button--primary.is-disabled{
                        background-color: rgba(50,208,147,0.5);
                        border-color:rgba(50,208,147,0.3)
                    }
                }
                .transfer-center-item:last-child{
                    .el-button--primary{
                        background-color: rgba(254,103,103,1);
                        border-color: rgba(254,103,103,1);
                    }
                    .el-button--primary.is-disabled{
                        background-color: rgba(254,103,103,0.5);
                        border-color:rgba(254,103,103,0.3)
                    }
                    span{
                        margin: 0px;
                    }
                }
            }
        }
    }
}

#warningSet{
    text-align: center;
    h3.warnSet_title{
        font-size: 18px;
        color: #000;
        text-align: left;
        font-weight: normal;
        padding-left: 75px;
        margin-bottom: 30px;
        
    }
    ul.warnSet_filter{
        padding-left: 80px;
        list-style: none;
        display: block;
        border-bottom: 1px solid #e5f3ff;
        li{
            margin-bottom: 15px;
            float: left;
            width: 100%;
            text-align: left;
            .warnSet_filter_item_title{
                font-size: 14px;
                color: #000;
            }
            label.el-radio{
                margin-right: 0px;
                .el-radio__input{
                    display: none!important;
                }
                .el-radio__label{
                    height: 32px;
                    display: inline-block;
                    font-size: 14px;
                    line-height: 32px;
                    padding: 0 10px;
                }
                .el-radio__input.is-checked+.el-radio__label{
                    background: #44a6ff;
                }
            }
            label.is-checked{
                .el-radio__label{
                    background: #44a6ff;
                    color: #fff;
                    border-radius: 4px;
                    i{
                        -moz-transform: rotate(0deg);
                        -webkit-transform: rotate(0deg);
                        -moz-transition: transform 0.8s; 
                        -webkit-transition: transform 0.8s; 
                    }
                }
            }
            .el-input__inner{
                height: 32px;
                line-height: 32px;
            }
            .el-input__suffix{
                .el-input__icon{
                    line-height: 32px;
                }
            }
            .el-checkbox-group{
                display: inline-block;
                margin-left: 10px;
                .el-checkbox{
                    margin-right: 15px;
                }
            }
        }
        li.warning{
            .el-radio__label{
                padding: 0 15px!important;
            }
            .el-radio__input.is-checked+.el-radio__label{
                background: #fe6767!important;
            }
        }
        li.singular{
            width: 55%!important;
        }
        li.timeInterval{
            width: 35%;
            .el-date-editor{
                width: 220px;
                padding: 0;
                .el-range__icon{
                    margin-left: 0;
                }
            }
        }
    }
    .saveBtn{
        width: 120px;
        height: 40px;
        line-height: 40px;
        background: #32d093;
        color: #fff;
        font-size: 16px;
        margin: 50px auto;
        position: relative;
        span{
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            text-align: center;
        }
    }
}

